<template>
  <div class="security">
    <h1>完成企业认证，参加线下招聘会！</h1>
    <el-form class="pic_box" :model="form" :rules="rules" ref="form">
      <h3>证照名称确认</h3>
      <el-form-item label="单位名称" prop="name">
        <el-input v-model="form.name" placeholder="单位名称"></el-input>
      </el-form-item>
      <el-form-item label="营业执照编号" prop="businessLicenseNo">
        <el-input v-model.trim="form.businessLicenseNo" placeholder="营业执照编号"></el-input>
      </el-form-item>
      <el-form-item label="年检日期" prop="annualTime">
        <el-date-picker v-model="form.annualTime" type="date" value-format="yyyy-MM-dd" placeholder="年检日期">
        </el-date-picker>
      </el-form-item>
      <h3>单位资质认证</h3>
      <h4>
        <span>企业营业执照</span>
        <div class="article">
          <i class="icon_blue"></i>
          <p>
            确保单位名称与提交审核公司一致;如为复印件、黑白扫描件，需加盖单位公章;不可使用屏幕截图或翻拍图片提交审核;上传图片不可有与樟树市人才服务无关的标注或水印;不可使用电子版营业执照提交审核;所上传执照照片，信息需清晰完整。企业营业执照仅用于审核,不会向第三方透露,请放心上传。
          </p>

          <i class="icon_blue"></i>
          <p>最多上传5张图片，图片要求以BMP,PNG或JPG格式，大小限制在3M以内</p>
        </div>
      </h4>
      <div class="upload">
        <el-upload ref="upload" class="upload-demo" action :limit="5" :http-request="postPic" :show-file-list="false"
          :file-list="fileList" list-type="picture">
          <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>
        <ul>
          <li v-for="(item,index) in len" :key="index">
            <img :src="fileList[index]?fileList[index].filePath:null" @click="()=>{handleRemove(index)}" alt />
          </li>
        </ul>
      </div>
    </el-form>
    <div class="btn_box">
      <el-button class="submit" @click="onSubmit" :loading="loading" v-loading.fullscreen.lock="loading">提交审核
      </el-button>
      <el-button class="back" @click="back">返回首页</el-button>
    </div>
  </div>
</template>

<script>
import { postPicture, companyQuery, companyAuth } from '../../../api/index';
import { companyAuthInfo } from '../../../api/home';
export default {
  data () {
    return {
      loading: false,
      fileList: [],
      len: 3,
      id: '',
      form: {
        name: '',
        businessLicenseNo: '', // 营业执照编号
        annualTime: '' // 注册时间
      },
      rules: {
        name: [{ required: true, message: '请输入单位名称', trigger: 'blur' }],
        businessLicenseNo: [
          { required: true, message: '请输入营业执照编号', trigger: 'blur' },
          {
            pattern: /(^(?:(?![IOZSV])[\dA-Z]){2}\d{6}(?:(?![IOZSV])[\dA-Z]){10}$)|(^\d{15}$)/,
            // pattern: /^\d+/,
            message: '请输入正确的营业执照编号',
            trigger: 'change'
          }
        ],
        annualTime: [{ required: true, message: '请输入年检日期', trigger: 'change' }]
      }
    };
  },
  mounted () {
    let companyId = this.$route.query.companyId;
    console.log(companyId);

    if (companyId) {
      // 获取企业信息
      companyAuthInfo({ companyId }).then(data => {
        if (data.success) {
          console.log(data);
          if (data.data) {
            this.form = data.data || {};
            if (data.data.annualTime) {
              this.form.annualTime = data.data.annualTime.slice(0, 10);
              console.log(this.form.annualTime);
            }
            this.fileList = data.data.companyAuthFilePoList || [];
            this.len = data.data.companyAuthFilePoList.length;
            this.id = data.data.id || '';
          }
        } else {
          this.$message.error(`${data.msg}`);
          this.$router.push({ path: '/' });
        }
      });
    }
  },
  methods: {
    // 删除上传的图片
    handleRemove (num) {
      let file = this.fileList.find((item, index) => index === num);
      this.fileList = this.fileList.filter((item, index) => index !== num);
      console.log(this.$refs.upload);
      if (file) {
        console.log(file.file);
        this.$refs.upload.onRemove(file, this.fileList);
      }
    },
    // 上传照片
    postPic (param) {
      let obj = {};
      obj.file = param.file;
      let fd = new FormData();
      fd.append('file', param.file);
      postPicture(fd).then(data => {
        if (data.success) {
          obj.filePath = data.data.fileUrl;
          console.log(data);
          this.fileList.push(obj);
          this.fileList.length > 3 ? (this.len = this.fileList.length) : null;
          console.log(this.fileList);
        } else {
          this.$message.error(`${data.msg}`);
        }
      });
    },
    // 保存
    onSubmit () {
      if (this.fileList.length === 0) {
        this.$alert('请上传', '提示');
        return;
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          this.loading = true;
          companyQuery({ name: this.form.name, authStatus: 2 }).then(data => {
            if (data.success) {
              let companyAuthFilePoList = this.fileList.map(item => {
                let obj = {};
                console.log(item);
                obj.filePath = item.filePath;
                if (item.companyId) {
                  obj.fileSize = item.fileSize;
                } else {
                  obj.fileSize = item.file.size;
                }
                obj.type = 1;
                return obj;
              });
              console.log(this.form.annualTime);
              let query = {
                id: this.id,
                name: this.form.name,
                businessLicenseNo: this.form.businessLicenseNo,
                annualTime: this.form.annualTime + ' 00:00:00',
                companyAuthFilePoList
              };
              console.log(query);
              companyAuth(query).then(data => {
                if (data.success) {
                  this.loading = false;
                  this.$message.success('提交审核成功');
                  this.$router.push({ path: '/' });
                } else {
                  this.loading = false;
                  this.$message.error(`${data.msg}`);
                }
              });
            } else {
              this.$message.error(`${data.msg}`);
            }
          });
        } else {
          this.$message.error('请输入单位名称和执照编号');
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 返回首页
    back () {
      this.$router.push({ path: '/' });
    }
  }
};
</script>

<style scoped>
.security {
    background: rgba(255, 255, 255, 1);
}
.security p {
    text-align: center;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
    margin-top: 44px;
}
.security h4 {
    margin-top: 24px;
}
.security .el-form-item {
    margin-top: 23px;
}
.security h4 span {
    vertical-align: top;
    text-align: right;
    margin-left: 238px;
    margin-right: 24px;
    width: 94px;
    display: inline-block;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.security h4 .article {
    display: inline-block;
    width: 550px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.security h4 .article p {
    text-align: left;
    display: inline-block;
    width: 526px;
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 20px;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
    margin-top: 0;
}
.security h3 {
    height: 20px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    margin-top: 23px;
    color: rgba(34, 34, 34, 1);
    opacity: 1;
}
.security h3::after {
    display: block;
    content: '';
    width: 28px;
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
    border-radius: 2px;
}
.icon_blue {
    display: inline-block;
    vertical-align: top;
    width: 8px;
    height: 8px;
    background: rgba(0, 147, 255, 1);
    border-radius: 50%;
    opacity: 1;
    margin-right: 10px;
}
.security h1 {
    height: 28px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: 600;
    line-height: 22px;
    color: rgba(0, 147, 255, 1);
    opacity: 1;
    padding: 28px 45px 13px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
}
.security /deep/ .el-upload.el-upload--picture-card {
    vertical-align: middle;
    border: none;
    width: 94px;
    height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    border-radius: 0;
    position: absolute;
    top: 0;
    left: 0;
}
.security .pic_box .el-form-item /deep/ .el-form-item__label {
    text-align: right;
    margin-left: 228px;
    margin-right: 24px;
    width: 104px;
    display: inline-block;
    height: 40px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 40px;
    padding: 0;
    color: rgba(85, 85, 85, 1);
    opacity: 1;
}
.security .pic_box .el-form-item /deep/ .el-form-item__content {
    width: 286px;
    display: inline-block;
}
.security .pic_box .el-form-item /deep/ .el-input__inner {
    width: 286px;
    height: 40px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
}

.security .pic_box {
    width: 1105px;
    border-bottom: 1px solid rgba(232, 232, 232, 1);
    opacity: 1;
    margin: 0 auto;
}
.security .upload {
    width: 630px;
    margin: 32px auto 0;
    position: relative;
}
.security .upload /deep/ .upload-demo {
    vertical-align: top;
    display: inline-block;
    width: 94px;
    height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    margin-right: 24px;
}
.security .upload /deep/ .el-button {
    width: 94px;
    height: 24px;
    background: rgba(24, 147, 252, 1);
    opacity: 1;
    line-height: 0;
}
.security .upload ul {
    display: inline-block;
    list-style: none;
    width: 500px;
    overflow: hidden;
}
.security .upload ul li {
    float: left;
    width: 124px;
    height: 124px;
    margin-right: 40px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    opacity: 1;
}
.security .upload ul li img {
    width: 100%;
    height: 100%;
}

.security .btn_box {
    height: 140px;
    line-height: 140px;
    text-align: center;
}
.security .submit {
    width: 148px;
    height: 49px;
    background: rgba(0, 147, 255, 1);
    opacity: 1;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;
    color: rgba(255, 255, 255, 1);
}
.security .back {
    width: 146px;
    height: 47px;
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(24, 147, 252, 1);
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 22px;
    color: rgba(24, 147, 252, 1);
    opacity: 1;
    margin-left: 32px;
}
</style>